﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <input type="button" id="streamButton" value="Start Streaming" />
    </div>
    <ul id="messagesList"></ul>

    <script src="js/signalr.min.js"></script>
    <script src="js/msgpack5.js"></script>
    <script src="js/signalr-protocol-msgpack.js"></script>
    <script>
        var connection = new signalR.HubConnectionBuilder()
            .withUrl('/streamHub')
            .configureLogging(signalR.LogLevel.Information)
            .withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol())
            .build()

        connection.start()
            .catch(function (err) {
                return console.error(err.toString())
            })

        document.getElementById('streamButton').addEventListener("click", function () {
            try {
                connection.stream("ReadLogStream")
                    .subscribe({
                        next: (item) => {
                            var li = document.createElement("li");
                            li.textContent = item;
                            document.getElementById("messagesList").appendChild(li);
                        },
                        complete: () => {
                            var li = document.createElement("li");
                            li.textContent = "Stream completed";
                            document.getElementById("messagesList").appendChild(li);
                        },
                        error: (err) => {
                            var li = document.createElement("li");
                            li.textContent = err;
                            document.getElementById("messagesList").appendChild(li);
                        },
                    });
            }
            catch (e) {
                console.error(e.toString())
            }
        })
    </script>
</body>
</html>